我們這次來介紹vue filter的使用方式，翻成中文叫過濾器，它有點像computed，差別在computed可以應用在其他computed、methods、生命週期、模板，而filter只能用在在模板上，但它支持串接使用讓其更強大。

簡單範例

先新增一個input標籤，並v-model一個值名為data，再用p標籤顯示

        <input type="text" v-model="data">
        <p>{{data}}</p>

    data:()=>({
        data:"",
    }),

接著要自訂義filter，在filter:{}裡打上過濾器名稱(像宣告function一樣)，再return值。
現在做好一個叫toto的過濾器，它的功能是若輸入首尾皆為英文且小寫，那就會轉換成大寫。
charAt(0)是取該字串的第一字。
toUpperCase()轉變大寫。
value.slice(2,(value.length-2))是取該字串的第2字到倒數第二字。

      toto(value) {
            return value.charAt(0).toUpperCase()+value.slice(2,(value.length-2))+value.charAt((value.length-1)).toUpperCase()
      },

然後我們將過濾器加到模板中。
用|符號添加過濾器

        <input type="text" v-model="data">
        <p>{{data|toto}}</p>

一個data也可以添加多個過濾器

        <input type="text" v-model="data">
        <p>{{data|filter1|filter2|filter3}}</p>

做到這裏我們做的過濾器是在該元件內設定的，也就是說只能在該元件使用，若要全域要先新增一個js黨，裡面放過濾器的內容

export default function(value) {
    return value.charAt(0).toUpperCase() + value.slice(2, (value.length - 2)) + value.charAt((value.length - 1)).toUpperCase()
}

接著在main.js引入過濾器

import currencyFilter from '../deepmap/filter.js';//引入你建立的過濾器js
Vue.filter('allarea', currencyFilter);//使用它並定義名稱

接著就可以在所有元件中使用了

<p>{{data|allarea}}</p>